<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        body {
            font: normal 16px/1.5 "Helvetica Neue", sans-serif;
            background: #456990;
            color: #fff;
            overflow-x: hidden;
            padding-bottom: 50px
        }

        .intro {
            background: #F45B69;
            padding: 100px 0
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center
        }

        h1 {
            font-size: 2.5rem
        }

        .timeline ul {
            background: #456990;
            padding: 50px 0
        }

        .timeline ul li {
            list-style-type: none;
            position: relative;
            width: 6px;
            margin: 0 auto;
            padding-top: 50px;
            background: #fff
        }

        .timeline ul li::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: inherit
        }

        .timeline ul li div {
            position: relative;
            bottom: 0;
            width: 400px;
            padding: 15px;
            background: #F45B69
        }

        .timeline ul li div::before {
            content: '';
            position: absolute;
            bottom: 7px;
            width: 0;
            height: 0;
            border-style: solid
        }

        .timeline ul li:nth-child(odd) div {
            left: 45px
        }

        .timeline ul li:nth-child(odd) div::before {
            left: -15px;
            border-width: 8px 16px 8px 0;
            border-color: transparent #F45B69 transparent transparent
        }

        .timeline ul li:nth-child(even) div {
            left: -439px
        }

        .timeline ul li:nth-child(even) div::before {
            right: -15px;
            border-width: 8px 0 8px 16px;
            border-color: transparent transparent transparent #F45B69
        }

        time {
            display: block;
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 8px
        }

        .timeline ul li::after {
            transition: background .5s ease-in-out
        }

        .timeline ul li.in-view::after {
            background: #F45B69
        }

        .timeline ul li div {
            visibility: hidden;
            opacity: 0;
            transition: all .5s ease-in-out
        }

        .timeline ul li:nth-child(odd) div {
            transform: translate3d(200px, 0, 0)
        }

        .timeline ul li:nth-child(even) div {
            transform: translate3d(-200px, 0, 0)
        }

        .timeline ul li.in-view div {
            transform: none;
            visibility: visible;
            opacity: 1
        }

        @media screen and (max-width:900px) {
            .timeline ul li div {
                width: 250px
            }

            .timeline ul li:nth-child(even) div {
                left: -289px
            }
        }

        @media screen and (max-width:600px) {
            .timeline ul li {
                margin-left: 20px
            }

            .timeline ul li div {
                width: calc(100vw - 91px)
            }

            .timeline ul li:nth-child(even) div {
                left: 45px
            }

            .timeline ul li:nth-child(even) div::before {
                left: -15px;
                border-width: 8px 16px 8px 0;
                border-color: transparent #F45B69 transparent transparent
            }
        }
    </style>
</head>

<body>
    <section class="intro">
        <div class="container">
            <h1>Vertical Timeline--自适应 &darr;</h1>
        </div>
    </section>

    <section class="timeline">
        <ul>
            <li>
                <div>
                    <time>1934</time> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                    praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                </div>
            </li>
            <li>
                <div>
                    <time>1937</time> Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse
                    finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
                </div>
            </li>
            <li>
                <div>
                    <time>1940</time> Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar
                    tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
                </div>
            </li>
            <li>
                <div>
                    <time>1943</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius
                    volutpat mattis. Vestibulum id magna est.
                </div>
            </li>
            <li>
                <div>
                    <time>1946</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius
                    volutpat mattis. Vestibulum id magna est.
                </div>
            </li>
            <li>
                <div>
                    <time>1956</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius
                    volutpat mattis. Vestibulum id magna est.
                </div>
            </li>
            <li>
                <div>
                    <time>1957</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius
                    volutpat mattis. Vestibulum id magna est.
                </div>
            </li>
            <li>
                <div>
                    <time>1967</time> Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta
                    faucibus, euismod quis ante.
                </div>
            </li>
            <li>
                <div>
                    <time>1977</time> Vestibulum porttitor lorem sed pharetra dignissim. Nulla maximus, dui a tristique
                    iaculis, quam dolor convallis enim, non dignissim ligula ipsum a turpis.
                </div>
            </li>
            <li>
                <div>
                    <time>1985</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius
                    volutpat mattis. Vestibulum id magna est.
                </div>
            </li>
            <li>
                <div>
                    <time>2000</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius
                    volutpat mattis. Vestibulum id magna est.
                </div>
            </li>
            <li>
                <div>
                    <time>2005</time> In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius
                    volutpat mattis. Vestibulum id magna est.
                </div>
            </li>
        </ul>
    </section>
    <script>
        (function () {
            'use strict';
            // define variables
            var items = document.querySelectorAll(".timeline li");

            // check if an element is in viewport
            // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
            function isElementInViewport(el) {
                var rect = el.getBoundingClientRect();
                return (
                    rect.top >= 0 &&
                    rect.left >= 0 &&
                    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
                );
            }

            function callbackFunc() {
                for (var i = 0; i < items.length; i++) {
                    if (isElementInViewport(items[i])) {
                        items[i].classList.add("in-view");
                    }
                }
            }

            // listen for events
            window.addEventListener("load", callbackFunc);
            window.addEventListener("resize", callbackFunc);
            window.addEventListener("scroll", callbackFunc);

        })();
    </script>
</body>

</html>